<template>
  <d2-container class="brushhandlist">
    <template slot="header">刷手信息</template>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select size="small" v-model="activval" placeholder="刷手状态">
          <el-option
            v-for="item in activlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select size="small" v-model="auditval" placeholder="请选择">
          <el-option
            v-for="item in auditlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input size="small" v-model="iptval" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="刷手 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="刷手姓名">
              <el-input type="text" v-model="props.row.t_name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select size="small" v-model="props.row.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexTeacher"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证">
              <el-input type="text" v-model="props.row.idcard"></el-input>
            </el-form-item>
            <el-form-item label="身份证照片">
              <el-button size="mini" type="primary" @click="handleLook(props.row,1)" plain>查看</el-button>
            </el-form-item>
            <el-form-item label="旺旺号图片">
              <el-button size="mini" type="primary" @click="handleLook(props.row,2)" plain>查看</el-button>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input type="text" style="width:150px;" v-model="props.row.phone"></el-input>
              <el-button size="mini" style="margin-left:10px;" @click="baidu(props.row.phone)" type="danger">查询手机号
              </el-button>
            </el-form-item>
            <el-form-item label="职业">
              <el-input type="text" v-model="props.row.jobs"></el-input>
            </el-form-item>
            <el-form-item label="刷手生日">
              <span>{{ props.row.birth }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="邀请码">
              <el-input type="text" v-model="props.row.invitation"></el-input>
            </el-form-item>
            <el-form-item label="支付宝账号">
              <el-input type="text" v-model="props.row.alpay"></el-input>
            </el-form-item>
            <el-form-item label="师傅佣金">
              <el-input type="text" v-model="props.row.b_money"></el-input>
            </el-form-item>
            <el-form-item label="佣金">
              <el-input type="text" v-model="props.row.y_money"></el-input>
            </el-form-item>
            <el-form-item label="分组">
              <el-input type="text" v-model="props.row.group"></el-input>
            </el-form-item>
            <el-form-item label="师傅">
              <el-button size="mini" type="primary" plain @click="MasterLook(props.row.teacher)">查看</el-button>
            </el-form-item>
            <el-form-item label="操作密码">
              <el-input type="text" v-model="props.row.password"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-select size="small" v-model="props.row.role" placeholder="请选择">
                <el-option
                  v-for="item in roleTeacher"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="旺旺号">
              <div style="display:flex;">
                <el-input type="text" v-model="props.row.taobao_name"></el-input>
                <el-button @click="GetTbNameLists(props.row)" type="primary">查看多旺旺</el-button>
              </div>
            </el-form-item>
            <el-form-item label="完成单数">
              <span>{{ props.row.task_num }}</span>
            </el-form-item>
            <el-form-item label="刷手微信号">
              <span>{{ props.row.wxname }}</span>
            </el-form-item>
            <el-form-item label="审核人">
              <span>{{ props.row.admin }}</span>
            </el-form-item>
            <el-form-item label="用户状态">
              <el-select size="small" v-model="props.row.user_status" placeholder="请选择">
                <el-option
                  v-for="item in statusTeacher"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <div style="display:flex;">
                <el-input type="text" v-model="props.row.desc"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="备注" style="opacity:0;">
              <div>
                <el-input type="text" v-model="props.row.desc"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Infochange(props.row)">修改</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="80">
      </el-table-column>
      <el-table-column
        width="120"
        align="center"
        label="刷手头像">
        <template slot-scope="props">
          <img :src="props.row.tx_path" alt="" style="width:50px;height:50px;border-radius:50%;">
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        align="center"
        label="刷手姓名"
        prop="t_name">
      </el-table-column>
      <el-table-column
        width="140"
        label="手机号"
        align="center"
        prop="phone">
      </el-table-column>
      <el-table-column
        width="140"
        label="抖音号"
        align="center"
        prop="dy_user">
      </el-table-column>
      <el-table-column
        width="120"
        label="职业"
        align="center"
        prop="jobs">
      </el-table-column>
      <el-table-column
        label="地址"
        align="center"
        prop="address">
      </el-table-column>
      <el-table-column
        label="分组"
        width="50"
        align="center"
        prop="group">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        label="操作">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link" style="cursor: pointer;">
              操作按钮<i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="clearfix">
                <el-button type="danger" size="mini" @click="enters(scope.row)">刷手入口</el-button>
              </el-dropdown-item>
              <el-dropdown-item class="clearfix">
                <el-button type="primary" size="mini" @click="user_statuss(scope.row.id)">评价处理</el-button>
              </el-dropdown-item>
              <el-dropdown-item class="clearfix">
                <el-button type="info" size="mini" @click="del_repeat_users(scope.row.phone)">删除多账号</el-button>
              </el-dropdown-item>
              <el-dropdown-item class="clearfix">
                <el-button style="background:#DD2BE0;color:white;" size="mini" @click="brushstatus(scope.row)">卡任务
                </el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        label="创建时间"
        prop="addtime">
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total >= 20"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="20"
      background
      layout="total, prev, pager, next"
      :total="total"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="cardImgDialog"
      width="30%"
      center>
      <el-image :src="cardimg">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </el-dialog>
    <el-dialog
      title="多旺旺列表"
      :visible.sync="wwdilogs"
      width="30%"
      center>
      <el-table
        :data="tableDatalist"
        border
        style="width: 100%">
        <el-table-column
          prop="tb_name"
          label="旺旺号"
          width="180">
          <template slot-scope="scope">
              <el-input v-model="scope.row.tb_name"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="审核状态"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">用户待审核</span>
            <span v-if="scope.row.status == 2">用户正常</span>
            <span v-if="scope.row.status == 3">用户冻结</span>
            <span v-if="scope.row.status == 4">用户审核中</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="">
          <template slot-scope="scope">
            <el-button @click="UpTbNameLists(scope.row,2)" type="danger" size="mini" plain>修改</el-button>
            <el-button @click="UpTbNameLists(scope.row,1,3)" v-show="scope.row.status == 2" type="primary" size="mini" plain>冻结</el-button>
            <el-button @click="UpTbNameLists(scope.row,1,2)" v-show="scope.row.status == 3" type="primary" size="mini" plain>解封</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="师傅信息"
      :visible.sync="Dialog"
      width="30%"
      center>
      <div style="display:flex;flex-direction: column;">
        <span style="font-size:18px;">师傅ID:{{ teacheruser.id }}</span>
        <br/>
        <span style="font-size:18px;">师傅姓名:{{ teacheruser.t_name }}</span>
      </div>
      <!--       <el-button type="primary"   style="margin-top:10px;">确认</el-button>-->
    </el-dialog>
    <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
  </d2-container>
</template>

<script>
import dayjs from 'dayjs'
import {mapActions} from 'vuex'
import {
  Userlist,
  GetTbNameList,
  teacher_user,
  changeInfo,
  user_status,
  UpTbNameList,
  del_repeat_user,
  UpdateUserStatus
} from '@api/sys.login'

export default {
  name: 'brushhandlist',
  components: {
    'remote-js': {
      render(createElement) {
        return createElement('script', {attrs: {type: 'text/javascript', src: this.src}});
      },
      props: {
        src: {type: String, required: true},
      },
    },
  },
  data() {
    return {
      tableData: [],
      page: 1,
      tableDatalist: [],
      wwdilogs: false,
      total: 0,
      wwmany: [],
      activval: '',
      roleTeacher: [
        {
          value: "1",
          label: "徒弟"
        },
        {
          value: "2",
          label: "师傅"
        },
      ],
      sexTeacher: [
        {
          value: "1",
          label: "男"
        },
        {
          value: "2",
          label: "女"
        },
      ],
      statusTeacher: [
        // {
        //   value: "1",
        //   label: "用户待审核"
        // },
        {
          value: "2",
          label: "用户正常"
        },
        {
          value: "3",
          label: "用户冻结"
        },
        // {
        //   value: "4",
        //   label: "用户审核中"
        // },
      ],
      teacheruser: {},
      activlist: [
        {
          value: 1,
          label: '待审核',
        },
        {
          value: 2,
          label: '正常',
        },
        {
          value: 3,
          label: '冻结',
        },
        {
          value: 4,
          label: '审核中',
        }
      ],
      auditval: '',
      auditlist: [
        {
          value: '微信名称',
          label: '微信名称',
        },
        {
          value: '用户ID',
          label: '用户ID',
        },
        {
          value: '真实姓名',
          label: '真实姓名',
        },
        {
          value: '手机号码',
          label: '手机号码',
        },
        {
          value: '分组',
          label: '分组',
        },
        {
          value: '旺旺号',
          label: '旺旺号',
        },
        {
          value: '抖音号',
          label: '抖音号',
        },
        {
          value: '角色',
          label: '角色',
        },
        {
          value: '师傅姓名',
          label: '师傅姓名',
        },
      ],
      iptval: '',
      Dialog: false,
      cardImgDialog: false,
      cardimg: '',
      title: '身份证照片'
    }
  },
  mounted() {
    let params = {
      page: this.page,
      pageSize: 20
    }
    this.getUserListData(params)
  },
  methods: {
    UpTbNameLists(row,type,data){
      if(type == 1){
        let params = {
          id:row.id,
          type:type,
          data:data
        }
        UpTbNameList(params).then((res)=>{
          console.log(res);
          this.wwdilogs= false
        })
      }else if(type == 2){
        let params = {
          id:row.id,
          type:type,
          data:row.tb_name
        }
        UpTbNameList(params).then((res)=>{
          console.log(res);
          this.wwdilogs = false
        })
      }
    },
    GetTbNameLists(row) {
      this.wwdilogs = true
      let params = {
        id: row.id
      }
      GetTbNameList(params).then((res) => {
        this.tableDatalist = res.data
      })
    },
    baidu(phone) {
      window.open('https://www.baidu.com/s?wd=' + phone)
    },
    brushstatus(row) {
      console.log(row);
      let params = {
        user_id: row.id,
        user_status: 1
      }
      UpdateUserStatus(params).then((res) => {
        console.log(res);
      })
    },
    del_repeat_users(row) {
      del_repeat_user(row).then((res) => {
        console.log(res);
      })
    },
    user_statuss(id) {
      let params = {
        id: id
      }
      user_status(params).then(res => {
        console.log(res);
      })
    },
    enters(row) {
      window.open('http://dht.ilovezong.com/#/Login?phone=' + row.phone + '&password=' + row.password)
    },
    connects(val) {
      window.open('https://amos.im.alisoft.com/msg.aw?v=2&uid=' + val + '&site=cntaobao&s=1&charset=utf-8')
    },
    Infochange(row) {
      if (row.role == '师傅') {
        row.role = 2
      } else if (row.role == '徒弟') {
        row.role = 1
      }
      if (row.user_status == "用户待审核") {
        row.user_status = 1
      } else if (row.user_status == "用户正常") {
        row.user_status = 2
      } else if (row.user_status == "用户冻结") {
        row.user_status = 3
      } else if (row.user_status == "用户审核中") {
        row.user_status = 4
      }
      if (row.sex == '男') {
        row.sex = 1
      } else if (row.sex == '女') {
        row.sex = 2
      }
      changeInfo(row.taobao_name, row.t_name, row.group, row.role, row.invitation, row.teacher, row.id, row.sex, row.user_status, row.phone, row.idcard, row.jobs, row.y_money, row.b_money, row.password, row.desc,row.alpay).then((res) => {
        console.log(res.data);
        let params = {
          page: this.page,
          pageSize: 20
        }
        this.getUserListData(params)
      })
    },
    MasterLook(teacher) {
      this.Dialog = true
      teacher_user(teacher)
        .then((res) => {
          this.teacheruser = res.data
        })
    },
    handleCurrentChange(val) {
      this.page = val
      this.onSearch()
    },
    getUserListData(params) {
      Userlist(params)
        .then((res) => {
          this.tableData = res.data.map((item) => {
            if (item.role == 2) {
              item.role = '师傅'
            } else if (item.role == 1) {
              item.role = '徒弟'
            }
            if (item.sex == 1) {
              item.sex = '男'
            } else if (item.sex == 2) {
              item.sex = '女'
            }
            if (item.user_status == 1) {
              item.user_status = "用户待审核"
            } else if (item.user_status == 2) {
              item.user_status = "用户正常"
            } else if (item.user_status == 3) {
              item.user_status = "用户冻结"
            } else if (item.user_status == 4) {
              item.user_status = "用户审核中"
            }
            return item
          })
          this.total = res.count
        })
    },
    //查询
    onSearch() {
      console.log(this.activval);
      let params = {
        page: this.page,
        pageSize: 20,
        user_status: this.activval
      }
      this.auditval == '微信名称' ? params.wxnam = this.iptval
        : this.auditval == '真实姓名' ? params.t_name = this.iptval
        : this.auditval == '手机号码' ? params.phone = this.iptval
          : this.auditval == '分组' ? params.group = this.iptval
            : this.auditval == '抖音号' ? params.dy_name = this.iptval
              : this.auditval == '旺旺号' ? params.taobao_name = this.iptval
                : this.auditval == '角色' ? params.role = this.iptval
                  : this.auditval == '师傅姓名' ? params.teachname = this.iptval
                    : this.auditval == '用户ID' ? params.userId = Number(this.iptval) : ''
      this.getUserListData(params)
    },
    //查看
    handleLook(row, idx) {
      console.log('row', row)
      this.cardImgDialog = true
      idx == 1 ? this.cardimg = row.idcode_img : this.cardimg = row.tb_img
      idx == 1 ? this.title = '身份证照片' : this.title = '旺旺号图片'
    },
  }
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.brushhandlist {
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

</style>

